<template>
	<view class="" style="">
		<view style="position: sticky;left: 0;right: 0;top: 0; height: 120rpx;">
			<uni-search-bar @confirm="search" placeholder="请输入商品名称" :focus="false" v-model="searchValue" @blur="blur"
				@input="input" @cancel="cancel" @clear="clear">
			</uni-search-bar>
		</view>
		<scroll-view scroll-y="true" class="conent">

			<view @click="itemBtnAction" :data-index="index"
				style="display: flex; justify-content: space-between; align-items: center;" class="item"
				v-for="(item, index) in list">
				<view class="" style="flex: 1; margin-left: 10rpx;">
					<view class="" style="font-size: 30rpx; font-weight: 700;">
						{{item.name}}
					</view>
					<view class="" style="font-size: 26rpx;">
						<text>价格:</text>
						<text style="color: #f00; margin-left: 10rpx;">¥{{item.price}}</text>
					</view>

				</view>
				<view class="" style="display: flex; flex-direction: column;">
					<image style="width: 40rpx;height: 40rpx; padding: 20rpx;"
						:src="item.selec == true ? '../../static/selec.png' : '../../static/selec_gray.png'"
						mode="widthFix"></image>
				</view>
			</view>
		</scroll-view>

		<view class=""
			style="height: 120rpx;line-height: 120rpx; background-color: #fff; position: fixed; left: 0;right: 0; bottom: 0;">
			<button @click="buttonAction" type="primary"
				style="margin: 20rpx; background-color: #007aff;color: white; height: 88rpx; font-size: 30rpx;display: flex; align-items: center; justify-content:center">确定</button>

		</view>
	</view>
</template>

<script>
	import api from '../../utils/interface.js'
	export default {
		data() {
			return {
				data: {

				},
				list: [],
				status: 0,
				query: '',
				userinfo: {}
				
			}
		},
		onLoad() {
			this.userinfo = uni.getStorageSync('data')
			
			this.getData()
			
		},
		methods: {
			async getData() {
				console.log();
				const config = {
					url: api.baseUrl + api.getDangweiList,
					method: 'post',
					data: {
						query: this.query
					}
				}
				const {
					data,
					code,
					msg
				} = await this.$http.request(config)
				console.log(code, data);
				if (code == 1) {
					if(this.userinfo.role == 2){
						this.list = data
						
					}else{
						this.list = []
					}
				} else {
					uni.showToast({
						icon: "none",
						title: msg
					})
				}
			},
			seebigImageAction(e) {
				const index = e.currentTarget.dataset.index
				const item = this.list[index];
				uni.previewImage({
					urls: [item.image]
				})
			},
			itemBtnAction(e) {
				const index = e.currentTarget.dataset.index
				this.list.map(item => {
					item.selec = false;
				})
				const item = this.list[index];
				item.selec = true
			},
			search(res) {
				this.query = res.value
				this.getData()
			},
			input(res) {
				this.query = res
			},
			clear(res) {
				this.query = ''
				this.getData()
			},
			blur(res) {
				this.query = res.value
				this.getData()
			},
			focus(e) {

			},
			cancel(res) {
				this.query = ''
				this.getData()
			},
			buttonAction() {

				const temp = this.list.filter(item => {
					return item.selec == 1
				})
				uni.$emit('chooseDangwei', temp[0])
				uni.navigateBack({
					delta: 1
				})
			}
		}
	}
</script>

<style lang="less">
	page {
		background-color: #e5e5e5;
	}

	.item {
		margin: 10rpx 20rpx;
		padding: 10rpx 20rpx;
		background-color: white;
		border-radius: 12rpx;
	}

	.content {
		margin: 20rpx;
		font-size: 28rpx;
	}

	.title-left {
		border-left: 8rpx solid blue;
		padding: 0 20rpx;
		margin: 20rpx;
		font-weight: 700;
	}

	.box-border {
		border: 2rpx solid #e5e5e5;
		padding: 10rpx;
	}

	.conent {
		height: calc(100vh - 250rpx);
	}
</style>